<template>
  
    <t-row style="width:100%" justify="space-between">
      <t-button @click="handleScrollExpand" id="btn">展开</t-button>
      <t-button id="btn1" theme="warning">测试按钮</t-button>
    </t-row>
    <ScrollData :width="750" :expandSpeed="40" :shrink-speed="20" :height="780" ref="scrollDataRef" v-if="isNeedShow" append="btn2" @shrink-end="isNeedShow=false">
      <template #info>
        <div class="center"><h1>温馨提示</h1></div>
        <pre class="line">
              致访问我博客的用户：
              &nbsp;&nbsp;由于我个人兴趣比较宽泛，啥都学了一点，导致博客的内容比较杂乱，大家可以跟着标签
              进行分类浏览
          </pre
        >
        <div class="left"><img src="./imgs/notes/1.png" width="400" /></div>
        <pre class="line">
              如果想要了解我开源的一些代码，大家可以访问我的gitee.里面有一些我开源的代码
          </pre
        >
        <div class="left"><img src="./imgs/notes/2.png" width="400" /></div>
        <pre class="line">
              &nbsp;&nbsp;最后感谢各位用户一如即往的支持，也请大家多多提宝贵意见，我得博客也会继续始终如
              一地为大家分享我学习到的内容。祝愿各位一切顺利。
          </pre
        >
        <div class="replenish-info">
          <div class="content">
            <span>codesigner</span>
            <span>2024年5月22日</span>
          </div>
        </div>
        <t-row style="width: 100%;" justify="center">
            <t-button theme="success" @click="handleScrollShrink">已阅</t-button>
        </t-row>
        
      </template>
    </ScrollData>
    <div>
        <div class="center"><h1>温馨提示</h1></div>
        <pre class="line">
              致访问我博客的用户：
              &nbsp;&nbsp;由于我个人兴趣比较宽泛，啥都学了一点，导致博客的内容比较杂乱，大家可以跟着标签
              进行分类浏览
          </pre
        >
        <div class="left"><img src="./imgs/notes/1.png" width="400" /></div>
        <pre class="line">
              如果想要了解我开源的一些代码，大家可以访问我的gitee.里面有一些我开源的代码
          </pre
        >
        <div class="left"><img src="./imgs/notes/2.png" width="400" /></div>
        <pre class="line">
              &nbsp;&nbsp;最后感谢各位用户一如即往的支持，也请大家多多提宝贵意见，我得博客也会继续始终如
              一地为大家分享我学习到的内容。祝愿各位一切顺利。
          </pre
        >
        <div class="replenish-info">
          <div class="content">
            <span>codesigner</span>
            <span>2024年5月22日</span>
          </div>
        </div>
    </div>
    <t-row style="width:100%" justify="space-between">
        <t-button  id="btn2">测试按钮</t-button>
        <t-button id="btn3" theme="warning">测试按钮</t-button>
    </t-row>
  
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue";
import ScrollData from "./components/scroll-data.vue";

const isNeedShow=ref(false);

const scrollDataRef = ref<InstanceType<typeof ScrollData>>(null);

const handleScrollExpand=()=>{
    isNeedShow.value=true
}

const handleScrollShrink=()=>{
    scrollDataRef.value.handleScrollShrink();
}

onMounted(()=>{
    isNeedShow.value=true;
})


</script>
<style scoped lang="less">
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  line-height: 24px;
}

.left {
  padding-left: 50px;
}
pre {
  margin: 0;
}
.replenish-info {
  display: flex;
  justify-content: flex-end;
  padding-right: 80px;
  .content {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
}
</style>
